import React, { useState } from "react";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { Button, Layout, Menu } from "antd";
import style from "./home.module.scss";
import LeftLeader from "../../components/LeftNav";
import ContentMain from "../ContentMain";
import NavigationAvatar from "../../components/NavigationAvatar";
const { Header, Sider, Content } = Layout;

export default function Home() {
  const [collapsed, setCollapsed] = useState(false);
  return (
    <Layout style={{ height: "100%" }}>
      <Sider
        style={{ backgroundColor: "#fff", height: "100%" }}
        collapsed={collapsed}
      >
        <div className={style.scrollleft}>
          <div className={style.logo}></div>
          <LeftLeader />
        </div>
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            backgroundColor: "#fff",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            height: "48px",
          }}
        >
          <Button
            size="small"
            type="text"
            style={{ marginLeft: "10px" }}
            onClick={() => {
              setCollapsed(!collapsed);
            }}
          >
            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          </Button>
          {/* <div style={{ marginRight: "20px" }}> */}
          <NavigationAvatar />
          {/* </div> */}
        </Header>
        <Content
          className="site-layout-background"
          style={{
            // overflow: "auto",
            margin: "16px ",
            // backgroundColor: "#fff",
            // padding: 24,
            minHeight: 280,
          }}
        >
          <ContentMain />
        </Content>
      </Layout>
    </Layout>
  );
}
